<template>
  <div class="ant-upload-list ant-upload-list-picture" :class="file.status === 'error' ? 'ant-upload-list-item-error' : ''">
    <div class="ant-upload-list-item" :class="prefixCls + '-item'">
      <div class="ant-upload-list-item-thumbnai">
        <MySimpleAudioPlayer
          :audioList="[{ url: file.url }]"
          :show-prev-button="false"
          :show-next-button="false"
          :show-playback-rate="false"
          :show-volume-button="false"
          :show-progress-bar="false"
          :isLoop="false"
          @loaded-metadata="({ duration }) => (state.duration = duration)"
        />
      </div>
      <span :class="prefixCls + '-voice-duration'">
        {{ state.duration ? state.duration : "0.00" }}
      </span>

      <span class="ant-upload-list-item-name">{{ file.name }}</span>
      <span class="ant-upload-list-item-actions picture">
        <a-button
          @click="handleRemove"
          size="small"
          type="text"
          title="移除文件"
          class="ant-upload-list-item-action ant-btn-icon-only"
          :class="prefixCls + '-action'"
        >
          <Icon icon="i-ant-design:delete-outlined" />
        </a-button>
      </span>
    </div>
  </div>
</template>
<script lang="ts" name="file-record" setup>
  import { ref, unref, onMounted, onUnmounted, watchEffect, reactive } from "vue"
  import { propTypes } from "/@/utils/propTypes"
  import MySimpleAudioPlayer from "/@/components/My/MySimpleAudioPlayer.vue"
  import { useDesign } from "/@/hooks/web/useDesign"
  import { Icon } from "/@/components/Icon"

  const emit = defineEmits(["remove", "download"])
  const { prefixCls } = useDesign("select-material")
  const state = reactive<any>({
    duration: "0.00",
  })
  const props = defineProps({
    width: propTypes.string.def("300px"),
    file: propTypes.object.def({}),
  })

  onUnmounted(() => {
    console.log("onUnmounted-props", unref(props))
  })

  watchEffect(() => {})

  const handleDownload = () => {
    emit("download")
  }

  const handleRemove = () => {
    emit("remove")
  }
</script>

<style lang="less">
  @prefix-cls: ~"@{namespace}-select-material";

  .@{prefix-cls}-item {
    display: flex;
    align-items: center;
  }

  .@{prefix-cls}-action:hover {
    color: #ff4d4f;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
  }

  .@{prefix-cls}-voice-duration {
    margin-left: -10px;
    margin-right: 5px;
  }
</style>
